<template>
  <div class="lecturerList" :style="{ 'padding-top': top, 'padding-left': px2rem(option.spacing),'padding-right': px2rem(option.spacing)}">
    <div class="lecturer">
      <van-pull-refresh
        v-model="isLoading"
        :style="{
          height: `calc(88vh - ${top} - ${footerHeight() || '0px'})`
        }"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedText"
          :immediate-check="false"
          :offset="20"
          @load="onLoad"
        >
          <div class="lecturer-list">
            <div
              v-for="(item, index) in list"
              :key="index"
              class="lecturer-content"
            >
              <van-image :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))" :fit="imgType">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <img src="../../images/base/error-icon.png" alt>
                </template>
              </van-image>
              <div class="content-text">
                <span class="iecturer-one">{{ isInitData ? getMapping(item, 'title'): item.name }}</span>
                <span class="iecturer-two etc">{{ isInitData ? getMapping(item, 'subTitle') : item.technicalTitle }}</span>
                <span class="iecturer-three clamp2">{{ isInitData ? getMapping(item, 'thirdTitle') : item.synopsis }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import mixins from '../mixins'
import mixin from './mixins'
export default {
  name: 'LecturerList',
  mixins: [mixins, mixin],
  inject: ['footerHeight'],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      isLoadError: false,
      isNoData: false,
      list: [],
      defaultList: [
        {
          headImgURL: '',
          name: '姓名',
          technicalTitle: '职称',
          synopsis: '简介',
          id: ''
        },
        {
          headImgURL: '',
          name: '姓名',
          technicalTitle: '职称',
          synopsis: '简介',
          id: ''
        },
        {
          headImgURL: '',
          name: '姓名',
          technicalTitle: '职称',
          synopsis: '简介',
          id: ''
        },
        {
          headImgURL: '',
          name: '姓名',
          technicalTitle: '职称',
          synopsis: '简介',
          id: ''
        }
      ],
      classifyId: ''// 分类ID
    }
  },
  async created() {
    if (this.isInitData && this.option.isInit) {
      await this.initData()
    } else {
      this.list = this.defaultList
      this.finished = true
    }
  },
  methods: {
    setData(result) {
      this.finished = false
      const { rows, total } = result?.dataList.data || {}
      this.list.push(...rows)
      this.loading = false
      this.isLoading = false
      this.isNoData = total < 1
      if (this.isNoData) {
        this.finishedText = ''
      } else {
        this.finishedText = '已经到底了'
      }
      if (this.list.length >= total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    onRefresh() {
      this.finished = false
      this.page = 1
      this.list = []
      this.getDataByCode('dataList')
    },
    /**
     * 上拉加载
     */
    onLoad() {
      if (!this.isLoading) {
        this.page++
        this.getDataByCode('dataList')
      } else {
        this.loading = false
      }
    }

  }
}
</script>

<style lang='scss'>
@import "@/styles/utility/rem.scss";
.lecturerList {
  width: 100%;
  .lecturer {
    width: 100%;
    .lecturer-list {
      width: 100%;
      display: flex;
      flex-direction: column;

        background: #ffffff;
        border-radius: rem(16);
      .lecturer-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 rem(24);
        .van-image {
          width: rem(132);
          height: rem(132);
          display: block;
          > img {
            border-radius: 50%;
          }
          .van-image__error,
          .van-image__loading {
            width: rem(132);
            height: rem(132);
            background: #dadada;
            border-radius: 50%;

            > img {
              width: rem(120);
              height: rem(120);
            }
          }
        }
        .content-text {
          margin-left: rem(20);
          flex: 1;
          width: 0;
          display: flex;
          padding:  rem(30) 0;
          flex-direction: column;

        border-bottom: rem(1) solid #EEEEEE;
          .iecturer-one {
            width: 100%;
            font-size: rem(30);
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            font-weight: 700;
            text-align: left;
            color: #333333;
          }
          .iecturer-two {
            width: 100%;
            font-size: rem(24);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
            color: #667280;
            margin-top: rem(21);
          }
          .iecturer-three {
            width: 100%;
            font-size: rem(24);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
            color: #999999;
            margin-top: rem(22);
          }
        }
      }
    }
  }
}
</style>
